<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/foot.jsp"%>
<html>
<head>

    <style type="text/css">
        .utils_a{
            font-size: 20px;
        }
        .glyphicon{
            font-size: 18px;
        }
        #searchForm{
            width: 500px;
        }
        #searchDiv{
            width: 400px;
        }
        #searchInput{
            width: 300px;
        }
        #searchButton{
            width: 60px;
            font-size: 18px;
        }
    </style>

</head>
<body>

<div class="page-header">

    <div class="row">
        <div class="text-center" style="font-size: 50px">eSHOP</div>
    </div>
    <div class="row">
        <div class="col-md-9"></div>
        <div class="col-md-3">
            <div class="text-right">
                <c:if test="${userSession != null}">
                    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                    <a class="utils_a" href="${pageContext.request.contextPath}/jsp/user/user.do?method=toCart">购物车</a><label class="utils_a">|</label>
                    <span class="glyphicon glyphicon-gift" aria-hidden="true"></span>
                    <a class="utils_a" href="#">我的订单</a><label class="utils_a">|</label>
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    <a class="utils_a" href="#">${userSession.name}</a><label class="utils_a">|</label>
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <a class="utils_a" href="${pageContext.request.contextPath}/jsp/user/user.do?method=logout">注销</a><label class="utils_a">|</label>
                </c:if>

                <c:if test="${userSession == null}">
                    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                    <a class="utils_a" href="#">帮助中心</a><label class="utils_a">|</label>
                    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                    <a class="utils_a" href="${pageContext.request.contextPath}/jsp/user/userRegister.jsp">注册</a><label class="utils_a">|</label>
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                    <a class="utils_a" href="${pageContext.request.contextPath}/jsp/user/userLogin.jsp">登录</a>
                </c:if>

            </div>
        </div>
    </div>

</div>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a class="navbar-brand" href="${pageContext.request.contextPath}/">eShop</a></li>
                <li><a href="javascript:void(0)" onclick="show('文学')" class="utils_a">文学</a></li>
                <li><a href="javascript:void(0)" onclick="show('生活')" class="utils_a">生活</a></li>
                <li><a href="javascript:void(0)" onclick="show('计算机')" class="utils_a">计算机</a></li>
                <li><a href="javascript:void(0)" onclick="show('外语')" class="utils_a">外语</a></li>
                <li><a href="javascript:void(0)" onclick="show('经管')" class="utils_a">经管</a></li>
                <li><a href="javascript:void(0)" onclick="show('励志')" class="utils_a">励志</a></li>
                <li><a href="javascript:void(0)" onclick="show('社科')" class="utils_a">社科</a></li>
                <li><a href="javascript:void(0)" onclick="show('学术')" class="utils_a">学术</a></li>
                <li><a href="javascript:void(0)" onclick="show('少儿')" class="utils_a">少儿</a></li>
                <li><a href="javascript:void(0)" onclick="show('艺术')" class="utils_a">艺术</a></li>
                <li><a href="javascript:void(0)" onclick="show('原版')" class="utils_a">原版</a></li>
                <li><a href="javascript:void(0)" onclick="show('科技')" class="utils_a">科技</a></li>
                <li><a href="javascript:void(0)" onclick="show('考试')" class="utils_a">考试</a></li>
                <li><a href="javascript:void(0)" onclick="show('生活百科')" class="utils_a">生活百科</a></li>
                <li><a href="javascript:void(0)" onclick="show('all')" class="utils_a">全部商品目录</a></li>
            </ul>
            <form action="" class="navbar-form navbar-right" id="searchForm">
                <div class="form-group" id="searchDiv">
                    <label style="color: snow" class="utils_a">Search</label>
                    <span class="glyphicon glyphicon-flash" aria-hidden="true" style="color: snow"></span>
                    <input type="text" class="form-control" placeholder="请输入书名" id="searchInput" value="${bookName}">
                </div>
                <button type="submit" class="btn btn-default" id="searchButton">搜索</button>
            </form>
        </div>
    </div>
</nav>
<div class="row text-center" style="font-size: 20px">
    <c:if test="${tips != null}">
        <div class="alert alert-success" role="alert">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            <span class="sr-only">Yes:</span>${tips}
        </div>
    </c:if>
    <c:if test="${error != null}">
        <div class="alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>${error}
        </div>
    </c:if>
</div>


<script type="text/javascript">
    $(function () {
        //绑定form表单 submit函数，在页面刚刚加载时
        $("#searchForm").submit(check_data);
    });

    function check_data() {

        var item = $("#searchInput").val();
        $.post({
            url: "${pageContext.request.contextPath}/jsp/main/main.do?method=queryData",
            data: {"item": item},
            dataType: "json",
            success:function (data) {
                var html="";
                for (let index = 0; index < data.length; index++) {
                    html += "<div class='col-sm-6 col-md-4 text-center myBook'>" +
                        "<div class='thumbnail' >";
                    if(data[index].picture != null && data[index].picture != ""){
                        html += "<img src='/image/bookImage/"+data[index].picture+"' alt='无图片' width='200' height='300'>";
                    }else {
                        html += "<img src='/image/bookImage/nullBook.png' alt='无图片' width='200' height='300'>";
                    }
                    html += "<div class='caption'>" +
                        "<h3>" + data[index].name + "</h3>" +
                        "<p>作者：" + data[index].author + "</p>" +
                        "<p>价格：" + data[index].price + "</p>" +
                        "<p><a href='/jsp/user/user.do?method=buy&bid="+data[index].id+"' class='btn btn-primary' role='button'>购买</a>"+
                        "<a href='/jsp/user/user.do?method=add_to_cart&bid="+data[index].id+"' class='btn btn-default' role='button'>添加到购物车</a></p>" +
                        "</div>" + "</div>" + "</div>";
                }
                $("#myDiv").html(html);
            }
        });

        return false;

    };

    function show(item){
        $.post({
            url: "${pageContext.request.contextPath}/jsp/main/main.do?method=query",
            data: {"item": item},
            dataType: "json",
            success:function (data) {
                var html="";
                for (let index = 0; index < data.length; index++) {
                    html += "<div class='col-sm-6 col-md-4 text-center myBook'>" +
                        "<div class='thumbnail' >";
                    if(data[index].picture != null && data[index].picture != ""){
                        html += "<img src='/image/bookImage/"+data[index].picture+"' alt='无图片' width='200' height='300'>";
                    }else {
                        html += "<img src='/image/bookImage/nullBook.png' alt='无图片' width='200' height='300'>";
                    }
                    html += "<div class='caption'>" +
                        "<h3>" + data[index].name + "</h3>" +
                        "<p>作者：" + data[index].author + "</p>" +
                        "<p>价格：" + data[index].price + "</p>" +
                        "<p><a href='/jsp/user/user.do?method=buy&bid="+data[index].id+"' class='btn btn-primary' role='button'>购买</a>"+
                        "<a href='/jsp/user/user.do?method=add_to_cart&bid="+data[index].id+"' class='btn btn-default' role='button'>添加到购物车</a></p>" +
                        "</div>" + "</div>" + "</div>";
                }
                $("#myDiv").html(html);
            }
        });
    };

</script>

</body>
</html>

